<template>
  <div class="receive-goods-page">
    <el-card class="receive-card">
      <div class="header-row">
        <h2 class="page-title">货物收取</h2>
        <div class="scan-section">
          <el-input
            v-model="scanCode"
            placeholder="请输入或扫码任务包编号"
            clearable
            style="width: 260px"
            @keyup.enter="handleQuery"
          />
          <el-button type="primary" style="margin-left:12px;" @click="handleQuery" :loading="loading">查询</el-button>
          <el-button type="info" style="margin-left:12px;" @click="showQrDialog = true">生成二维码</el-button>
        </div>
      </div>
      <el-divider v-if="packageInfo">包裹信息</el-divider>
      <div v-if="packageInfo">
        <div class="package-info-row">
          <span><b>任务包编号：</b>{{ packageInfo.packageId }}</span>
          <span><b>配送区域：</b>{{ packageInfo.deliveryArea }}</span>
          <span><b>订单数量：</b>{{ packageInfo.orderCount }}</span>
          <span><b>总配送费：</b>¥{{ packageInfo.totalReward }}</span>
        </div>
        <el-table :data="packageInfo.orders" border style="margin: 18px 0;">
          <el-table-column prop="orderNumber" label="订单号" min-width="140" />
          <el-table-column prop="customerName" label="客户" min-width="100" />
          <el-table-column prop="address" label="地址" min-width="180" />
          <el-table-column prop="reward" label="配送费" min-width="80" />
          <el-table-column prop="remark" label="备注" min-width="120" />
        </el-table>
        <div style="text-align:right;">
          <el-button type="success" @click="handleConfirm" :loading="confirming">确认收取</el-button>
        </div>
      </div>
      <el-empty v-else-if="queried" description="未查询到该任务包信息" />
    </el-card>
    <!-- 二维码弹窗 -->
    <el-dialog v-model="showQrDialog" title="扫码收取二维码" width="320px" :close-on-click-modal="false">
      <div style="display:flex;flex-direction:column;align-items:center;">
        <div id="qrcode"></div>
        <div style="margin-top:12px;word-break:break-all;">{{ qrUrl }}</div>
      </div>
      <template #footer>
        <el-button @click="showQrDialog = false">关闭</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, watch, nextTick } from 'vue'
import { ElMessage } from 'element-plus'
import { getTaskPackageDetail, confirmReceivePackage } from '@/assets/delivery.js'
// 引入qrcodejs2
import QRCode from 'qrcodejs2'

const scanCode = ref('')
const loading = ref(false)
const confirming = ref(false)
const packageInfo = ref(null)
const queried = ref(false)
const showQrDialog = ref(false)
const qrUrl = ref('')

const handleQuery = async () => {
  if (!scanCode.value) {
    ElMessage.warning('请输入任务包编号')
    return
  }
  loading.value = true
  packageInfo.value = null
  queried.value = false
  try {
    const res = await getTaskPackageDetail(scanCode.value)
    if (res.data.code === 200 && res.data.data) {
      packageInfo.value = res.data.data
      queried.value = false
    } else {
      packageInfo.value = null
      queried.value = true
    }
  } catch (e) {
    ElMessage.error('查询失败')
    packageInfo.value = null
    queried.value = true
  } finally {
    loading.value = false
  }
}

const handleConfirm = async () => {
  if (!packageInfo.value) return
  confirming.value = true
  try {
    const res = await confirmReceivePackage(packageInfo.value.packageId)
    if (res.data.code === 200) {
      ElMessage.success('收取成功')
      packageInfo.value = null
      scanCode.value = ''
      queried.value = false
    } else {
      ElMessage.error(res.data.message || '收取失败')
    }
  } catch (e) {
    ElMessage.error('网络错误')
  } finally {
    confirming.value = false
  }
}

// 生成二维码逻辑
watch(showQrDialog, async (val) => {
  if (val) {
    // 生成二维码内容（可根据实际需求调整）
    qrUrl.value = `${window.location.origin}/mobile/confirm?packageId=${scanCode.value || (packageInfo.value && packageInfo.value.packageId) || ''}`
    await nextTick()
    document.getElementById('qrcode').innerHTML = ''
    new QRCode(document.getElementById('qrcode'), {
      text: qrUrl.value,
      width: 200,
      height: 200
    })
  }
})
</script>

<style scoped>
.receive-goods-page {
  padding: 32px 24px;
  background: #f7f8fa;
  min-height: 100vh;
}
.receive-card {
  max-width: 900px;
  margin: 0 auto;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.06);
  padding: 32px 36px;
}
.header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.page-title {
  font-size: 24px;
  font-weight: bold;
  color: #333;
}
.scan-section {
  display: flex;
  align-items: center;
}
.package-info-row {
  display: flex;
  gap: 32px;
  margin-bottom: 10px;
  font-size: 15px;
  color: #444;
}
</style> 